<template>
  <div class="container">
    <div class="container-bj" @click="gotologin">
      <img src="/static/img/tou.jpg">
      <span style="margin-top: .2rem">{{name}}</span>
      <p style="margin-top: .2rem" v-show="idCard!==''">卡号：{{idCard}}</p>
    </div>

    <div class="container-integral">
      <!--          <p>-->
      <!--              <span>0</span>-->
      <!--              <span>优惠券</span>-->
      <!--          </p>-->
      <!--          <p>-->
      <!--              <span>0</span>-->
      <!--              <span>换鼓励金</span>-->
      <!--          </p>-->
      <p style="display:-webkit-box">
        余额：
        <span>￥{{balance}}</span>
        <!--              <span>rmb</span>-->
      </p>
    </div>

    <div class="container-order" to="/order" tag="div">
      <div class="container-order-1">
        <p class="left">常用功能</p>
        <!--             <p class="right">全部订单 ></p>-->
      </div>
      <div class="container-order-2">
        <p class="" v-for="(list,index) in container" @click="gothis(index)">
          <img :src="list.img">
          <span>{{list.name}}</span>
        </p>
      </div>
    </div>

    <div class="container-con" id="transition">

      <router-link to="/NewActivites" class="con" style="clear: both">
        <div class="con-left">
          <i class="iconfont icon-dongtai"></i>
          <span>最新活动</span>
          <div class="con-rigth">
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/PayRecord" class="con" style="clear: both">
        <div class="con-left">
          <i class="iconfont icon-quanbudingdan"></i>
          <span>消费记录</span>
          <div class="con-rigth">
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/AboutWe" class="con" style="clear: both">
        <div class="con-left">
          <i class="iconfont icon-bangzhuguanyuwomen"></i>
          <span>关于我们</span>
          <div class="con-rigth">
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
      </router-link>


      <!--            <router-link to="/address" class="con" id="transition">-->
      <!--                 <div class="con-left">-->
      <!--                  <i class="iconfont icon-gouwuche"></i>-->
      <!--                  <span>我的收货地址</span>-->
      <!--              </div>-->
      <!--              <div class="con-rigth">-->
      <!--                  <i class="iconfont icon-youjiantou"></i>-->
      <!--              </div>-->
      <!--          </router-link>-->

      <!--          <a target="_blank" href="http://www.myfwk.cn" class="con">-->
      <!--                 <div class="con-left">-->
      <!--                  <i class="iconfont icon-bangzhuguanyuwomen"></i>-->
      <!--                  <span>关于我</span>-->
      <!--              </div>-->
      <!--              <div class="con-rigth">-->
      <!--                  <i class="iconfont icon-youjiantou"></i>-->
      <!--              </div>-->
      <!--          </a>-->
      <div class="con-left" style="clear: both;margin-top: 1rem;margin-bottom: 2rem">
        <span><mt-button class="logout" type="primary" @click="logout" v-show="name !== '未登录'">退出登录</mt-button></span>
      </div>
    </div>
    <!--    <mt-button style="visibility: hidden" type="primary">退出登录</mt-button>-->
  </div>
</template>

<script>
  import {mapState, mapMutations, mapGetters} from "vuex";

  export default {
    name: "Mycontainer",
    data() {
      return {
        name: "未登录",
        container: [
          {
            img: "/static/img/444.png",
            name: "付款码"
          },
          {
            img: "/static/img/222.png",
            name: "我的订单"
          },
          {
            img: "/static/img/333.png",
            name: "意见反馈"
          }, {
            img: "/static/img/111.png",
            name: "常见问题"
          },
        ],
        balance: 0,
        idCard: ""
      }
    },
    // computed: {
    //   ...mapGetters(["this.$store.state.orders"]),
    //   jifeng() {
    //     var jifeng = 0;
    //     this.$store.state.orders.forEach(list => {
    //       jifeng += parseInt(list.price)
    //     });
    //     return jifeng;
    //   }
    // },

    mounted() {
      this.name = localStorage.getItem("userNick");
      this.token = localStorage.getItem("token");
      //请求余额
      if (this.token !== null && this.token !== '') {
        let postData = this.$qs.stringify({
          token: this.token,
        });
        this.$axios.get(this.$apis.money, postData).then(res => {
          console.log(res);
          if (res.data.code === 1) {
            //成功
            this.balance = res.data.data.balance;
            this.idCard = res.data.data.idCard;
          } else {
            //弹错误提示
            this.$myUtils.bottomToast(res.data.msg)
          }
        })
          .catch(error => {
            this.$myUtils.bottomToast(error)
          })
      }

    },
    methods: {
      gothis(index) {
        switch (index) {
          case 0:
            this.$router.push('/ercode');
            break;
          case 1:
            this.$router.push('/orderNew');
            break;
          case 2:
            this.$router.push('/feedback');
            break
          case 3:
            this.$router.push('/question');
            break;
        }
      },
      gotologin() {
        if (this.name === "未登录")
          this.$router.push('/login');
      },
      logout() {
        localStorage.setItem("token", "");
        localStorage.setItem("userNick", "未登录");
        this.$router.push("/login");
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .container-order {
    width 100%
    height 3.5rem
    background white
    display block
    margin-bottom .15rem
    margin-top .15rem
    font-size 0.35rem

    .container-order-1 {
      width 100%
      height 1.5rem

      .left {
        float: left;
        display: block;
        line-height: 1.5rem;
        margin-left: .5rem;
        font-size: 0.4rem;
      }

      .right {
        float: right;
        line-height: 1.5rem;
        margin-right: .6rem;
        font-size: 0.4rem;
      }
    }

    .container-order-2 {
      width 100%
      height 1.5rem
      display flex
      justify-content center
      align-items center

      p {
        width 25%
        display flex
        flex-direction column
        margin-top .3rem

        img {
          width .8rem
          height .8rem
          margin auto
        }

        span {
          text-align center
          padding-top .3rem
        }
      }
    }
  }

  .t {
    background-image url('/static/img/t.png');
  }

  .container {
    width: 100%;
    height: 5rem;
    position: absolute;
    top: 1.45rem;

    .container-bj {
      width: 100%;
      height: 100%;
      background: url('/static/img/bj.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 50%;
      }

      span {
        color: #ffffff;
        font-size: 0.5rem;
      }

      p {
        font-size 0.35rem;
        color: #ffffff;
      }
    }

    .container-integral {
      width 100%
      height 1rem
      background #ffffff
      display: flex;
      justify-content: center

      p {
        width 33%
        height 100%
        font-size .36rem
        line-height .6rem
        font-weight 500
        float left
        display flex
        flex-direction column
        text-align center
        justify-content: center;
      }
    }

    .container-con {
      /*margin-bottom 1.45rem*/

      .con {
        width: 100%;
        height: 1.41rem;
        background: #ffffff;
        border-bottom: 1px solid #f0f0f0;
        display: block;

        .con-left {
          line-height: 1.3rem;
          padding-left: 0.47rem;

          i {
            font-size: 0.5rem;
          }

          span {
            font-size: 0.37rem;
            padding-left: 0.1rem;
          }
        }

        .con-rigth {
          float: right;
          line-height: 1.3rem;
          padding-right: 0.4rem;
        }
      }
    }
  }

  .logout {
    width 100%;
    /*margin-bottom 3rem;*/

  }
</style>
